<!--
 * @Descripttion: 
 * @version: 
 * @Author: wl
 * @Date: 2020-06-05 14:42:53
 * @LastEditors: wl
 * @LastEditTime: 2020-07-10 15:02:14
--> 

 
<template>
  <div style="height: 100%">
    <div class="search_wrap">
      <el-input
        class="normal"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        :style="{ width: width }"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <el-tree
      class="filter-tree"
      ref="tree"
      :data="treeData"
      :key="tree_key"
      :props="treeProps"
      :node-key="nodeKey"
      @node-click="handleClick"
      :current-node-key="currentNode"
      highlight-current
      v-loading="loading"
      :filter-node-method="filterNode"
      :default-expand-all="false"
    ></el-tree>
    <!-- <el-tree :key="tree_key" class="filter-tree" :data="treeData" :props="treeProps" :node-key="nodeKey"
      @node-click='handleClick' :default-expanded-keys="expandedKeys" highlight-current :filter-node-method="filterNode"
      ref="tree" :expand-on-click-node="false" :style="{ width: width,height: height }" v-loading="loading">
      <span :class="['custom-tree-node',data.isParentCorp ? 'not_allowed' : '']" slot-scope="{ node, data }">
        <span>{{node.label}}</span>
      </span>
    </el-tree>-->
  </div>
</template>
<script>
export default {
  name: "unit-tree",
  props: {
    nodeKey: {
      type: String,
      default: "_id",
    },
    width: {
      type: String,
      default: "200px",
    },
    currentNode: {
      type: [Number, String],
      default: "",
    },
    height: {
      type: String,
      default: "auto",
    },
  },
  data() {
    return {
      filterText: "",
      loading: false,
      treeData: [],
      treeProps: {
        label: "name",
        children: "children",
      },
      expandedKeys: [],
      tree_key: 0,
      curTreeId: "",
    };
  },
  methods: {
    /* 查询 */
    handleQuery: function () {
      this.loading = true;
      this.$api.dept.findDeptTree().then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.treeData = res.data;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error",
          });
        }
      });
    },
    handleClick: function (data, node, base) {
      if (this.curTreeId !== data.GID) {
        this.curTreeId = data.GID;
        // 按钮操作处理函数
        this.$nextTick(function () {
          this.$refs.tree.setCurrentKey(this.curTreeId);
          this.$refs.tree.filter(this.filterText);
        });

        this.$emit("click", data, node, base);
      } else {
        this.curTreeId = "";
        this.$refs.tree.setCurrentKey(null);
        this.tree_key++;
        this.$emit(
          "click",
          {
            id: "",
          },
          node,
          base
        );
        // this.checkClear();

        // this.$emit(
        //   "click",
        //   {
        //     GID: ""
        //   },
        //   node,
        //   base
        // );
      }

      // this.$emit("click", data, node, base);
      // this.$nextTick(function () {
      //   this.$refs.tree.setCurrentKey(this.curTreeId);
      //   this.$refs.tree.filter(this.filterText);
      // });

      // if (data.isParentCorp) {
      //   this.tree_key++
      //   this.$nextTick(function () {
      //     this.$refs.tree.setCurrentKey(this.curTreeId)
      //     this.$refs.tree.filter(this.filterText)
      //   })
      // } else {
      //   if (this.curTreeId !== data.GID) {
      //     this.curTreeId = data.GID
      //     // 按钮操作处理函数
      //     this.$emit('click', data, node, base)
      //   } else {
      //     this.checkClear()
      //     this.$emit('click', {
      //       GID: '',
      //       corpId: ''
      //     }, node, base)
      //   }
      // }
    },
    checkClear: function () {
      this.curTreeId = "";
      this.$refs.tree.setCurrentKey(null);
      this.tree_key++;

      this.$nextTick(function () {
        this.$refs.tree.filter(this.filterText);
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.treeProps.label].indexOf(value) !== -1;
    },
    getExpandedKeysByLevel(data, level, arr, value) {
      let _this = this;
      let _level = 0;
      if (level !== undefined && level !== null) {
        _level = level + 1;
      }
      data.forEach((item) => {
        if (_level <= value) {
          arr.push(item.id);
          this.$set(item, "expanded", true);
          if (item.children) {
            _this.getExpandedKeysByLevel(item.children, _level, arr, value);
          }
        }
      });
    },
  },
  mounted() {
    this.handleQuery();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    currentNode(nVal) {
      //设置默认选中项
      if (!nVal) {
        this.$refs.tree.setCurrentKey(null);
      }
    },
  },
  // watch: {
  //   filterText(val) {
  //     this.$refs.tree.filter(val);
  //   }
  // }
};
</script>

<style lang='scss' scoped>
.filter-tree {
  .not_allowed {
    width: 100%;
    cursor: not-allowed;
    line-height: 26px;
  }
}
</style>
